<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" @keyup.enter.native="getEdition()">
        <el-form-item>
          <el-select v-model="dataForm.expandEditionType" clearable placeholder="请选择类型">
            <el-option label="碑帖欣赏" :value="0"> </el-option>
            <el-option label="国学经典" :value="1"> </el-option>
            <el-option label="书法知识" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.addType" clearable placeholder="请选择类别">
            <el-option label="软笔" :value="0"> </el-option>
            <el-option label="硬笔" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getEdition()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addEdition(0)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="editionList"
      stripe
      v-loading="dataListLoading"
      style="width: 100%"
      ref="expand"
    >
      <!-- 扩展版本下的分类集合 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children" stripe style="width: 100%" ref="fenlei">
            <!-- 扩展版本下的分类下的版本资源集合 -->
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.children" stripe style="width: 100%">
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="版本资源id"
                    prop="id"
                  >
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="顺序"
                    prop="rorder"
                  >
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="资源名称"
                    prop="resourceName"
                  >
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button type="text" @click="addEditionResource(1, scope.row.id, props.row.expandEditionType, props.row.addType, scope.row)"
                        >修改</el-button
                      >
                      <el-button type="text" @click="deleteEditionResource(scope.row.id, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              header-align="center"
              align="center"
              label="分类id"
            ></el-table-column>
            <el-table-column
              prop="name"
              header-align="center"
              align="center"
              label="分类名称"
            ></el-table-column>
            <el-table-column
              prop="corder"
              header-align="center"
              align="center"
              label="分类顺序"
            ></el-table-column>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="addEditionResource(0, scope.row.id, props.row.expandEditionType, props.row.addType, scope.row)"
                  >添加版本资源</el-button
                >
                <el-button type="text" @click="addClass(1, scope.row.id, scope.row)"
                  >修改</el-button
                >
                <el-button type="text" @click="deleteClass(scope.row.id, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        header-align="center"
        align="center"
        label="扩展版本id"
      ></el-table-column>
      <el-table-column
        prop="expandCover"
        header-align="center"
        align="center"
        label="扩展版本封面"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.expandCover"></el-image> </template
      ></el-table-column>
      <el-table-column
        prop="expandEditionType"
        header-align="center"
        align="center"
        label="类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.expandEditionType == 0">碑帖欣赏</span>
          <span v-else-if="scope.row.expandEditionType == 1">国学经典</span>
          <span v-else>书法知识</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="addType"
        header-align="center"
        align="center"
        label="类别"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.addType == 0">软笔</span>
          <span v-else>硬笔</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="eorder"
        header-align="center"
        align="center"
        label="顺序"
      ></el-table-column>
      <el-table-column
        prop="createtime"
        header-align="center"
        align="center"
        label="创建时间"
      ></el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="addClass(0, scope.row.id, scope.row)"
            >添加分类</el-button
          >
          <el-button style="" type="text" @click="addEdition(1, scope.row.id, scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="deleteById(scope.row.id, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogEditionVisible"
      :title="type == 0 ? '添加扩展版本信息' : '修改扩展版本信息'"
    >
      <el-form
        :rules="dataRule"
        ref="editionForm"
        :model="edition"
        label-width="120px"
      >
        <el-form-item label="版本封面" prop="expandCover">
          <el-upload
            class="avatar-uploader"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="edition.expandCover"
              :src="edition.expandCover"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类别" prop="addType">
          <el-select v-model="edition.addType" filterable placeholder="请选择类别">
            <el-option
              :key="0"
              label="软笔"
              :value="0"
            >
            </el-option>
            <el-option
              :key="1"
              label="硬笔"
              :value="1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本类型" prop="expandEditionType">
          <el-select v-model="edition.expandEditionType" filterable placeholder="请选择版本类型">
            <el-option
              :key="0"
              label="碑帖欣赏"
              :value="0"
            >
            </el-option>
            <el-option
              :key="1"
              label="国学经典"
              :value="1"
            >
            </el-option>
            <el-option
              :key="2"
              label="书法知识"
              :value="2"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="eorder">
          <el-input-number
            v-model="edition.eorder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditionVisible = false">取 消</el-button>
        <el-button
          :disabled="saveEditionBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogClassVisible"
      :title="type == 0 ? '添加分类信息' : '修改分类信息'"
    >
      <el-form
        :rules="dataRule1"
        ref="classForm"
        :model="fenlei"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="fenlei.name" />
        </el-form-item>
        <el-form-item label="顺序" prop="corder">
          <el-input-number
            v-model="fenlei.corder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClassVisible = false">取 消</el-button>
        <el-button
          :disabled="saveClassBtnDisabled"
          type="primary"
          @click="saveOrUpdate1"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogEditionResourceVisible"
      :title="type == 0 ? '添加版本资源信息' : '修改版本资源信息'"
    >
      <el-form
        :rules="dataRule2"
        ref="editionResourceForm"
        :model="editionResource"
        label-width="120px"
      >
        <el-form-item label="顺序" prop="rorder">
          <el-input-number
            v-model="editionResource.rorder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="资源" prop="rid">
          <el-select v-model="editionResource.rid" filterable placeholder="请选择资源">
            <el-option
              v-for="z in list"
              :key="z.id"
              :label="z.name"
              :value="z.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditionResourceVisible = false">取 消</el-button>
        <el-button
          :disabled="saveEditionResourceBtnDisabled"
          type="primary"
          @click="saveOrUpdate2"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div>
      <!-- <el-button @click="previous">上一步</el-button> -->
      <!-- <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
        >下一步</el-button
      > -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      hang: {},
      dataForm: {
        addType: null,
        expandEditionType: null,
      },
      saveBtnDisabled: false, // 下一步按钮是否禁用
      edition: {
        // 扩展版本对象
        id: null,
        name: "",
        expandCover: "",
        expandEditionType: null,
        addType: null,
        eorder: 1
      },
      fenlei: {
        id: null,
        name: "",
        eid: null,
        corder: 1,
      }, // 扩展版本分类
      editionResource: {
        // 版本资源
        id: null,
        cid: null,
        rid: null,
        rorder: 1,
      },
      editionList: [], // 扩展版本集合
      dataListLoading: false, // 加载扩展版本数据
      type: 0, // 0:添加1:修改
      dialogEditionVisible: false, // 添加扩展版本信息对话框
      dialogClassVisible: false, // 添加扩展版本分类对话框
      dialogEditionResourceVisible: false, // 添加版本资源对话框
      saveEditionBtnDisabled: false, // 扩展版本信息保存按钮是否禁用
      saveClassBtnDisabled: false, // 扩展版本分类保存按钮是否禁用
      saveEditionResourceBtnDisabled: false, // 扩展版本分类保存按钮是否禁用
      dataRule: {
        // 数据规则
        expandCover: [{ required: true, message: "封面不能为空" }],
        expandEditionType: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        addType: [{ required: true, message: "类别不能为空", trigger: "blur" }],
      },
      dataRule1: {
        // 数据规则
        name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
      },
      dataRule2: {
        // 数据规则
        rid: [{ required: true, message: "资源不能为空", trigger: "blur" }],
      },
      zList: [], // 所有资源
      list:[], // 各自的资源
    };
  },

  activated() {
    // 看看是哪里来的
    this.dataListLoading = true;
    this.getEdition();
    this.$http({
      url: this.$http.adornUrl(`/sf/cbexpandresource/getResourceAllList`),
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.zList = data.zList;
      }
    });
  },

  methods: {
    // 发布资源包
    publishZip(id) {
      this.$confirm(`发布资源包过程可能长达5-10分钟请您耐心等待`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            this.dataListLoading = true;
          this.$http({
            url: this.$http.adornUrl(`/sf/cbbook/createZip/1379378732553310209`),
            method: "get",
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "发布成功",
                type: "success",
                duration: 1500,
              });
            } else {
              this.$message.error(data.msg);
            }
            this.dataListLoading = false;
          });
        })
        .catch(() => {});
    },
    //上传成功后的回调函数
    handleAvatarSuccess(response) {
      this.edition.expandCover = response.url;
    },
    // 获取固定扩展版本数据
    getEdition() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/sf/cbexpandedition/list`),
        method: "get",
        params: this.$http.adornParams({
          addType: this.dataForm.addType,
          expandEditionType: this.dataForm.expandEditionType,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.editionList = data.editionList;
        } else {
          this.editionList = [];
        }
        this.dataListLoading = false;
        for (let i = 0; i < this.editionList.length; i++) {
          if (this.hang.id == this.editionList[i].id || this.hang.eid == this.editionList[i].id) {
            this.$nextTick(() => {
              this.$refs.expand.toggleRowExpansion(this.editionList[i], true);
              if(this.hang.eid == this.editionList[i].id){
                for(let j = 0; j < this.editionList[i].children.length; j++){
                  if(this.hang.id == this.editionList[i].children[j].id){
                    this.$nextTick(() => {
                      this.$refs.fenlei.toggleRowExpansion(this.editionList[i].children[j], true);
                    })
                  }
                }
              }
            }); 
            break;
          }
          for(let j = 0; j < this.editionList[i].children.length; j++){
            if(this.hang.cid == this.editionList[i].children[j].id){
                this.$nextTick(() => {
                  this.$refs.expand.toggleRowExpansion(this.editionList[i], true);
                  this.$nextTick(() => {
                    this.$refs.fenlei.toggleRowExpansion(this.editionList[i].children[j], true);
                  })
                })
                break;
            }
          }
        }
        
      });
    },
    // 扩展版本对话框中的保存或修改
    saveOrUpdate() {
      if (this.type == 0) {
        // 添加扩展版本
        this.editionFormSubmit();
      } else {
        // 修改扩展版本
        this.updateEdition();
      }
    },
    // 扩展版本分类对话框中的保存或修改
    saveOrUpdate1() {
      if (this.type == 0) {
        // 添加分类
        this.classFormSubmit();
      } else {
        // 修改分类
        this.updateClass();
      }
    },
    // 版本资源对话框中的保存或修改
    saveOrUpdate2() {
      if (this.type == 0) {
        // 添加版本资源
        this.editionResourceFormSubmit();
      } else {
        // 修改版本资源
        this.updateEditionResource();
      }
    },
    // 删除分类
    deleteClass(id, row) {
      this.$confirm(`确定对[分类id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbexpandresourceclassification/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 删除版本资源
    deleteEditionResource(id, row) {
      this.$confirm(`确定对[版本资源id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbexpandeditionresource/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 更新分类信息
    updateClass() {
      this.$refs["classForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandresourceclassification/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.fenlei.id,
                name: this.fenlei.name,
                eid: this.fenlei.eid,
                corder: this.fenlei.corder,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  
                  this.getEdition();
                  this.dialogClassVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 打开对话框，添加、修改
    addEdition(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.editionForm.resetFields(); // this.$refs['editionForm'].resetFields(); 可能不识别 、还是不识别
      });
      if (status == 0) {
        // 添加
        this.type = 0;
        // 清空
        this.edition.id = null;
      } else {
        // 修改
        this.type = 1;
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbexpandedition/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.edition.id = data.cbExpandEdition.id;
          this.edition.expandCover = data.cbExpandEdition.expandCover;
          this.edition.expandEditionType = data.cbExpandEdition.expandEditionType;
          this.edition.addType = data.cbExpandEdition.addType;
          this.edition.eorder = data.cbExpandEdition.eorder;
        });
      }
      this.dialogEditionVisible = true;
    },
    addClass(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.classForm.resetFields(); // this.$refs['classForm'].resetFields(); 可能不识别 、还是不识别
      });
      if (status == 0) {
        // 添加
        this.type = 0;
        // 清空
        this.fenlei.id = null;
        this.fenlei.eid = id;
      } else {
        // 修改
        this.type = 1;
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbexpandresourceclassification/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.fenlei.id = data.cbExpandResourceClassification.id;
          this.fenlei.name = data.cbExpandResourceClassification.name;
          this.fenlei.corder = data.cbExpandResourceClassification.corder;
          this.fenlei.eid = data.cbExpandResourceClassification.eid;
        });
      }
      this.dialogClassVisible = true;
    },
    // 打开版本资源对话框
    addEditionResource(status, id, type, addType, row) {
      this.hang = row;
      this.list = this.zList.filter(f => f.expandEditionType == type && f.addType == addType);
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.editionResourceForm.resetFields();
      });
      if (status == 0) {
        // 添加
        // 清空
        this.editionResource.cid = id;
        this.editionResource.id = null;
        this.editionResource.rid = null;
        this.dialogEditionResourceVisible = true;
      } else {
        // 修改
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbexpandeditionresource/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.editionResource.id = data.cbExpandEditionResource.id;
          this.editionResource.rid = data.cbExpandEditionResource.rid;
          this.editionResource.rorder = data.cbExpandEditionResource.rorder;
          this.editionResource.cid = data.cbExpandEditionResource.cid;
          this.dialogEditionResourceVisible = true;
        });
      }
      this.type = status;
    },
    // 通过扩展版本id删除扩展版本
    deleteById(id, row) {
      this.$confirm(`确定对[扩展版本id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbexpandedition/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 表单提交
    editionFormSubmit() {
      // 表单验证
      this.$refs["editionForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandedition/save`),
            method: "post",
            data: this.$http.adornData(
              {
                expandCover: this.edition.expandCover,
                expandEditionType: this.edition.expandEditionType,
                addType: this.edition.addType,
                eorder: this.edition.eorder
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                  this.dialogEditionVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 版本资源表单提交
    editionResourceFormSubmit() {
      // 表单验证
      this.$refs["editionResourceForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandeditionresource/save`),
            method: "post",
            data: this.$http.adornData(
              {
                rorder: this.editionResource.rorder,
                cid: this.editionResource.cid,
                rid: this.editionResource.rid,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                  this.dialogEditionResourceVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 分类表单提交
    classFormSubmit() {
      // 表单验证
      this.$refs["classForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandresourceclassification/save`),
            method: "post",
            data: this.$http.adornData(
              {
                eid: this.fenlei.eid,
                name: this.fenlei.name,
                corder: this.fenlei.corder,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                  this.dialogClassVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    updateEdition() {
      // 表单验证,只需要验证扩展版本名称
      this.$refs["editionForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandedition/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.edition.id,
                expandCover: this.edition.expandCover,
                expandEditionType: this.edition.expandEditionType,
                addType: this.edition.addType,
                eorder: this.edition.eorder
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                  this.dialogEditionVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    updateEditionResource() {
      // 表单验证,只需要验证扩展版本名称
      this.$refs["editionResourceForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandeditionresource/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.editionResource.id,
                rid: this.editionResource.rid,
                rorder: this.editionResource.rorder,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getEdition();
                  this.dialogEditionResourceVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
